<script setup lang="ts">
import { useProductInfo } from "./index";
import { PermCode } from "@/utils/perm";
const {
  actionButtons,
  dlgShow,
  dlgTitle,
  editFormColumns,
  editFormData,
  editFormRules,
  handleAdd,
  handlePaginationChange,
  handleSave,
  handleSearch,
  pageInfo,
  searchFormColumns,
  searchFormData,
  tableColumns,
  tableData,
  total
} = useProductInfo();
</script>
<template>
  <el-card shadow="never">
    <template #header>
      <PlusSearch
        v-model="searchFormData"
        :columns="searchFormColumns"
        :show-number="2"
        label-position="right"
        :has-reset="false"
        @search="handleSearch"
      />
    </template>
    <PlusTable
      :columns="tableColumns"
      :table-data="tableData"
      :action-bar="{ buttons: actionButtons, width: 120 }"
      :pagination="{
        total,
        modelValue: pageInfo,
        pageSizeList: [10, 20, 50, 100],
        align: 'right'
      }"
      showOverflowTooltip
      adaptive
      @paginationChange="handlePaginationChange"
    >
      <template #title>
        <Auth :value="PermCode.product.add">
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </Auth>
      </template>
    </PlusTable>
    <PlusDialogForm
      v-model:visible="dlgShow"
      v-model="editFormData"
      :dialog="{ title: dlgTitle }"
      :form="{
        columns: editFormColumns,
        rules: editFormRules,
        labelWidth: '100px',
        labelPosition: 'right'
      }"
      :hasErrorTip="false"
      @confirm="handleSave"
    />
  </el-card>
</template>
